<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元信息 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 CSS from jsDelivr CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <title>忘记密码 - 账户恢复</title>

    <style>
        /* 自定义样式 */
        body {
            background-color: #f5f5f5;
        }
        .password-reset-container {
            max-width: 600px;
            margin: 5rem auto;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }
        .step-indicator:before {
            content: "";
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #dee2e6;
            z-index: 1;
        }
        .step {
            text-align: center;
            z-index: 2;
        }
        .step-number {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            background: #dee2e6;
            color: #6c757d;
            display: inline-block;
            margin-bottom: 0.5rem;
        }
        .step.active .step-number {
            background: #0d6efd;
            color: white;
        }
        .step.completed .step-number {
            background: #198754;
            color: white;
        }
        .step-label {
            font-size: 0.875rem;
            color: #6c757d;
        }
        .step.active .step-label {
            color: #0d6efd;
            font-weight: bold;
        }
        .step.completed .step-label {
            color: #198754;
        }
        .form-step {
            display: none;
        }
        .form-step.active {
            display: block;
        }
        .countdown {
            color: #dc3545;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="password-reset-container">
        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <div class="step active" id="step1-indicator">
                <div class="step-number">1</div>
                <div class="step-label">验证身份</div>
            </div>
            <div class="step" id="step2-indicator">
                <div class="step-number">2</div>
                <div class="step-label">验证码</div>
            </div>
            <div class="step" id="step3-indicator">
                <div class="step-number">3</div>
                <div class="step-label">设置新密码</div>
            </div>
        </div>

        <!-- 表单步骤1: 输入账号或邮箱 -->
        <div class="form-step active" id="step1">
            <h3 class="mb-4">找回密码</h3>
            <p class="text-muted mb-4">请输入您的账号或注册邮箱，我们将发送验证码到您的邮箱</p>

            <form id="accountForm">
                <div class="mb-3">
                    <label for="account" class="form-label">账号或邮箱</label>
                    <input type="text" class="form-control" id="account" name="account" required>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">发送验证码</button>
                    <a href="Login.jsp" class="btn btn-link">返回登录</a>
                </div>
            </form>
        </div>

        <!-- 表单步骤2: 输入验证码 -->
        <div class="form-step" id="step2">
            <h3 class="mb-4">验证邮箱</h3>
            <p class="text-muted mb-4">我们已向 <strong id="email-display">user@example.com</strong> 发送了验证码，请输入验证码继续</p>
            <p class="text-muted mb-4">验证码有效期: <span class="countdown">5:00</span></p>

            <form id="verificationForm">
                <div class="mb-3">
                    <label for="verificationCode" class="form-label">验证码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="verificationCode" name="verificationCode" required>
                        <button class="btn btn-outline-secondary" type="button" id="resendCode">重新发送</button>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">验证</button>
                    <button type="button" class="btn btn-outline-secondary" id="backToStep1">上一步</button>
                </div>
            </form>
        </div>

        <!-- 表单步骤3: 设置新密码 -->
        <div class="form-step" id="step3">
            <h3 class="mb-4">设置新密码</h3>
            <p class="text-muted mb-4">请为您的账号设置一个新密码</p>

            <form id="passwordForm">
                <div class="mb-3">
                    <label for="newPassword" class="form-label">新密码</label>
                    <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                    <div class="form-text">密码长度至少8位，包含字母和数字</div>
                </div>

                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">确认新密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">完成</button>
                    <button type="button" class="btn btn-outline-secondary" id="backToStep2">上一步</button>
                </div>
            </form>
        </div>

        <!-- 完成后的提示 -->
        <div class="alert alert-success mt-3 d-none" id="successMessage">
            <i class="bi bi-check-circle-fill"></i> 密码重置成功！<a href="Login.jsp" class="alert-link">立即登录</a>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 页面交互脚本 -->
<script>
    // 这里只提供前端交互逻辑，实际验证需要后端支持
    document.addEventListener('DOMContentLoaded', function() {
        // 模拟步骤切换
        document.getElementById('accountForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // 这里应该有AJAX验证账号/邮箱是否存在

            // 模拟成功响应
            document.getElementById('email-display').textContent = document.getElementById('account').value;
            goToStep(2);
            startCountdown();
        });

        document.getElementById('verificationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // 这里应该有AJAX验证验证码是否正确

            // 模拟成功响应
            goToStep(3);
        });

        document.getElementById('passwordForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // 这里应该有AJAX提交新密码

            // 显示成功消息
            document.getElementById('step3').classList.remove('active');
            document.getElementById('successMessage').classList.remove('d-none');
        });

        document.getElementById('backToStep1').addEventListener('click', function() {
            goToStep(1);
            clearInterval(countdownInterval);
        });

        document.getElementById('backToStep2').addEventListener('click', function() {
            goToStep(2);
        });

        document.getElementById('resendCode').addEventListener('click', function() {
            // 这里应该有AJAX请求重新发送验证码
            alert('验证码已重新发送');
            startCountdown();
        });

        // 步骤切换函数
        function goToStep(step) {
            // 更新步骤指示器
            document.querySelectorAll('.step').forEach((el, index) => {
                if (index + 1 < step) {
                    el.classList.remove('active');
                    el.classList.add('completed');
                } else if (index + 1 === step) {
                    el.classList.add('active');
                    el.classList.remove('completed');
                } else {
                    el.classList.remove('active', 'completed');
                }
            });

            // 显示对应的表单步骤
            document.querySelectorAll('.form-step').forEach(el => {
                el.classList.remove('active');
            });
            document.getElementById('step' + step).classList.add('active');
        }

        // 验证码倒计时
        let countdownInterval;
        function startCountdown() {
            let timeLeft = 300; // 5分钟 = 300秒
            updateCountdownDisplay(timeLeft);

            clearInterval(countdownInterval);
            countdownInterval = setInterval(function() {
                timeLeft--;
                updateCountdownDisplay(timeLeft);

                if (timeLeft <= 0) {
                    clearInterval(countdownInterval);
                    document.querySelector('.countdown').textContent = '已过期';
                }
            }, 1000);
        }

        function updateCountdownDisplay(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            document.querySelector('.countdown').textContent =
                `${mins}:${secs < 10 ? '0' : ''}${secs}`;
        }
    });
</script>
</body>
</html>
